// 函数
function testGetPriority(value) {
    if (!value) return;

    let status = null;
    if (value === "未批阅") status = "dhx-demo_grid-status--done";
    if (value === "批阅中") status = "dhx-demo_grid-status--in-progress"
    if (value === "已批阅") status = "dhx-demo_grid-status--not-started";
    return `
		<div class='dhx-demo_grid-template'>
			<div class='dhx-demo_grid-status ${status}'></div>
			<span>${value}</span>
		</div>
	`
}

// 静态配置

// UI配置
export const boardHomeConfig = {
    // 核心属性
    cols: [
        {
            id: "test2Column",
            type: "line",
            resizable: true,
            rows: [
                { id: "test2Grid" },
            ],
        },
        {
            id: "scanColumn",
            type: "line",
            rows: [
                { id: "scanToolbar", height: 56, },
                { id: "scanGrid" },
            ],
        },
    ],
    // 交互配置
    // 事件绑定
    // 布局配置
    css: "dhx_layout_cell--overflow-auto",
    type: "line",
    // 其他默认值
};

export const test2ToolbarConfig = {
    // 核心属性
    data: [
        { type: "spacer" },
        {
            "id": "creat",
            "type": "button",
            "value": "新建测试"
        },
    ],
    // 交互配置
    // 事件绑定
    // 布局配置
    css: "dhx_widget--bordered",
    // 其他默认值
}

export const test2ContextMenuConfig = {
    // 核心属性
    data: [
        { id: "scan", value: "扫描答题卡", "icon": "dxi dxi-check" },
    ],
    // 交互配置
    // 事件绑定
    // 布局配置
    css: "dhx_widget--bordered",
    // 其他默认值
}

export const test2GridConfig = {
    // 核心属性
    columns: [
        {
            id: "testName",
            header: [
                { text: "测试名称", align: "center" },
                { content: "comboFilter", tooltipTemplate: () => "选择一个测试" }
            ],
            align: "center",
            resizable: true,
        },
        {
            id: "number",
            header: [
                { text: "题目数量", align: "center" },
                { content: "inputFilter" }
            ],
            align: "center",
        },
        {
            id: "startDate",
            header: [{ text: "创建日期", align: "center" }, { content: "inputFilter" }],
            align: "center",
            type: "date",
            dateFormat: "%Y/%m/%d",
            editorConfig: { asDateObject: true }
        },
        {
            id: "status",
            header: [{ text: "状态", align: "center" }, { content: "selectFilter" }],
            editorType: "combobox",
            options: ["未批阅", "批阅中", "已批阅"],
            editorConfig: {
                template: ({ value }) => testGetPriority(value)
            },
            template: testGetPriority,
            htmlEnable: true,
            align: "center",
        },
        {
            id: "actions",
            header: [{ text: "操作", tooltip: true, align: "center", rowspan: 2 }],
            mark: () => "dhx-demo_color--gray",
            template: () => `<i class="dxi dxi-dots-vertical row-menu"></i>`,
            align: "center",
            tooltip: false, editable: false, sortable: false, htmlEnable: true,
        }
    ],
    // 交互配置
    dragItem: "both",
    editable: false,
    keyNavigation: true,
    selection: "row",
    // 事件绑定
    // 布局配置
    autoWidth: true,
    height: "auto",
    leftSplit: 1,
    // 其他默认值
}

export const boardScanConfig = {
    // 核心属性
    rows: [
        { id: "toolbar", height: 56, },
        { id: "grid" },
    ],
    // 交互配置
    // 事件绑定
    // 布局配置
    // 其他默认值
}

export const scanToolbarConfig = {
    // 核心属性
    data: [
        {
            "id": "return",
            "type": "button",
            "view": "link",
            "color": "secondary",
            "icon": "mdi mdi-arrow-left",
        },
        { "id": "show", "value": "显示二维码" },
        { "id": "upload", "value": "手动上传学生答题卡" },
    ],
    // 交互配置
    // 事件绑定
    // 布局配置
    css: "dhx_widget--bordered",
    // 其他默认值
}

export const scanGridConfig = {
    // 核心属性
    columns: [
        {
            id: "expand",
            width: 50,
            header: [{ text: "", align: "center" }],
            align: "center",
            htmlEnable: true,
            template: (text, row) => {
                const icon = row.$opened ? '▼' : '▶';
                return `<span class="dhx-expand-icon" style="cursor: pointer; font-size: 16px;">${icon}</span>`;
            },
        },
        {
            id: "class",
            header: [{ text: "班级", align: "center" }],
            align: "center",
        },
        {
            id: "id",
            header: [{ text: "学号", align: "center" }],
            align: "center",
        },
        {
            id: "name",
            header: [{ text: "姓名", align: "center" }],
            align: "center",
        },
        {
            id: "gender",
            header: [{ text: "性别", align: "center" }],
            align: "center",
        },
        {
            id: "score",
            header: [{ text: "客观题分数", align: "center" }],
            align: "center",
        },
    ],
    subRowHeight: 250,
    subRowConfig: {
        height: 250,
        padding: 20,
        toggleIcon: true,
    },
    subRow: (row) => {
        return `
            <div class="dhx-appartment">
                ${row.src ? `
                    <div class="dhx-appartment__image dhx-appartment__container" style="background-image: url(${row.src})"></div>
                ` : `
                    <div class="dhx-appartment__image dhx-appartment__container dhx-appartment__noimage">无图片</div>
                `}
            </div>
        `;
    },
    // 交互配置
    editable: false,
    selection: "row",
    rowCss: (row) => {
        return "dhx_grid-row--with-subrow";
    },
    // 事件绑定
    // 布局配置
    autoWidth: true,
    height: "auto",
    leftSplit: 1,
    // 其他默认值
}

// 测试数据
export const test2Data = [
    {
        testName: "2022年12月02日小测",
        number: 5,
        startDate: "Fri Feb 02 2022 00:00:00",
        status: "已批阅",
    },
    {
        testName: "2022年03月03日小测",
        number: 8,
        startDate: "Sun Mar 03 2022 00:00:00",
        status: "已批阅",
    },
    {
        testName: "2025年01月01日小测",
        number: 10,
        startDate: "Mon Jan 01 2025 00:00:00",
        status: "批阅中",
    },
    {
        testName: "2025年01月10日小测",
        number: 6,
        startDate: "Tue Jan 10 2025 00:00:00",
        status: "未批阅",
    },
];
